<template>
  <!-- swiper 轮播图组件，是轮播图最外层的容器  -->
  <!-- options 属性是对轮播图进行的相关设置 -->
  <swiper class="swiper" :options="swiperOption">
    <!-- swiper-slide 是每一张轮播图 -->
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide>
    <swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide>
    <swiper-slide>Slide 9</swiper-slide>
    <swiper-slide>Slide 10</swiper-slide>

    <!-- 存放的是轮播图指示器 -->
    <div class="swiper-pagination" slot="pagination"></div>

    <!-- 轮播图 左右箭头 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'VTest',
  title: 'Loop mode / Infinite loop',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      // 根据这些配置项展示轮播图交互效果
      swiperOption: {
        slidesPerView: 1, // 一屏展示几张轮播图
        spaceBetween: 30, // 每张轮播图之间的间隙
        loop: true, // 是否循环展示

        // autoplay: true, 自动播放
        autoplay: {
          delay: 2000 // 设置滚动的时间
        },

        // 设置指示器
        pagination: {
          el: '.swiper-pagination', // 将指示器渲染到哪一个容器中
          clickable: true // 指示器是否能够点击
        },

        // 配置上一页、下一页容器
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper {
  height: 400px;
}
</style>
